<template>
  <div id="shop-product-classify-page" class="shop-page"
       :style="{
    paddingTop:(this.getSafeArea().top-4)+'px',
    height:(getWinSize().height-50-this.getSafeArea().top)+'px'
  }"
  >
    <!--店铺头部-->
    <shop-header  v-if="shop.id>0" :shop="shop" :style="{top:(this.getSafeArea().top-4)+'px'}"/>

    <div class="product-classify-box" :style="{
      paddingTop: (this.getSafeArea().top+166)+'px',
        height: (this.getWinSize().height-215-this.getSafeArea().top)+'px'
      }">
      <div class="left-menu" :style="{
        height: (this.getWinSize().height-215-this.getSafeArea().top)+'px'
      }">
        <div class="item" v-for="(item,index) in allClassifyArr" :key="index" :class="item.id===classifyArrCurrId?'curr':''" v-text="item.name" @click="changeClassifyArrCurrId(item.id)"></div>
        <div class="c"></div>
      </div>


      <div class="right-box" :style="{
        height: (this.getWinSize().height-215-this.getSafeArea().top)+'px'
      }">
        <div class="item" v-for="(item,index) in classifyArr_2" :key="index">
          <div class="title">
            <span v-text="item.name"></span>
          </div>
          <div class="list-item">
            <div class="item" v-for="(_item,_index) in item.subList" :key="_index" v-text="_item.name" @click="$router.push({
            name:'ShopProduct',
            query:{
              id:$route.query.id,
              classifyId:_item.id,
              classifyName:_item.name,
            }
            })"></div>
            <div class="c"></div>
          </div>
          <div class="c"></div>
        </div>

<!--        <div class="item">-->
<!--          <div class="title">-->
<!--            <span>气动工具</span>-->
<!--          </div>-->
<!--          <div class="list-item">-->
<!--            <div class="item">气动枪</div>-->
<!--            <div class="item">气动螺丝刀</div>-->
<!--            <div class="c"></div>-->
<!--          </div>-->
<!--          <div class="c"></div>-->
<!--        </div>-->
      </div>

      <div class="c"></div>

    </div>

    <shop-bottom-nav/>
  </div>
</template>

<script>
import ShopHeader from '../common/ShopHeader'
import ShopBottomNav from '../common/ShopBottomNav'
export default {
  name: 'ShopProductClassify',
  components: {ShopBottomNav, ShopHeader},
  data:function () {
    return {
      shop: {
        id: 0,
        name: '',
        logo: this.NoImageUrl,
        isCollect: false,
        collectNums: 0,
        productNums: 0,
        location: '',
        province: '',
        city: '',
        county: '',
        address: '',
        businessTime: '',
        sameCitySend: true,
        banner: []
      },
      allClassifyArr:[],
      classifyArr_2:[],
      classifyArrCurrId:0
    }
  },
  mounted () {
    let $this=this
    $this.getAllClassify(function () {
      $this.getDetail()
      $this.classifyArrCurrId=$this.allClassifyArr[0].id
      $this.initClassifyArr_2()
    })

  },
  methods:{
    // 获取所有分类
    getAllClassify:function (callback) {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Shop/allProductClassify', {
        id: $this.$route.query.id
      }, function (data) {
        $this.allClassifyArr = data
        callback()
        $this.$forceUpdate()
      }, function (data) {
        $this.successTip(data.message, 'error')
      })
    },
    initClassifyArr_2:function () {
      let $this=this
      $this.classifyArr_2=[]
      $this.allClassifyArr.forEach(function (value,index) {
        if (value.id===$this.classifyArrCurrId){
          value.subList.forEach(function (_value, _index) {
            $this.classifyArr_2.push(_value)
          })
        }
      })
      // console.log('$this.classifyArr_2',$this.classifyArr_2)
      $this.$forceUpdate();
      /* $this.classifyArr_1=classifyArr_1;
      $this.classifyArrCurrId=classifyArr_1[0].id

      var classifyArr_2=[]
      $this.allClassifyArr.forEach(function (value,index) {
        if (classifyArrCurrId===value.id){
          value.subList.forEach(function (_value, _index) {
            classifyArr_2.push(_value)
          })
        }
      }) */
    },
    changeClassifyArrCurrId:function (id) {
      this.classifyArrCurrId=id
      this.initClassifyArr_2()
    },
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Shop/getDetail', {
        id: $this.$route.query.id
      }, function (data) {
        $this.isLoading = false
        $this.shop = data
        $this.$forceUpdate()
      }, function (data) {
        $this.isLoading = false
        $this.successTip(data.message, 'error')
      })
    },
  }
}
</script>

<style scoped>

</style>
